
<template>
    <div class="right">
        <div class="right-title">
            <div class="title-search">
                <el-dropdown>
                    <el-button type="primary">
                        更多菜单<i class="el-icon-arrow-down el-icon--right"></i>
                    </el-button>
                </el-dropdown>
            </div>
            <div class="title-input">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
        </div>
        <div class="right-content">
            <el-scrollbar style="height:100%;">
                <ul>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-9"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-8"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-9"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-9"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-7"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-6"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-5"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-6"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-5"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-9"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-7"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-6"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-5"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-6"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-5"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                    <li>
                        <div class="content-wrap">
                            <span class="wrap-icon-pre iconfont icon-2"></span>
                            <span class="wrap-name">滨州工业园微型空气站14#站</span>
                            <span class="wrap-icon-aft iconfont icon-11"></span>
                        </div>
                    </li>
                </ul>
            </el-scrollbar>
        </div>
    </div>
</template>

<script>
export default {
    components: {},
    data() {
        return {

        };
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
        this.$anime({
            targets: '.right',
            translateX: [300, 0],
            easing: 'easeInOutSine',
            delay: 1000,
        });
        this.$anime({
            targets: '.right .right-content li',
            translateX: [-300, 0],
            easing: 'easeInOutSine',
            delay: this.$anime.stagger(200), // 每个元素的延迟增加100毫秒。,
        });
    },
    destroyed() {},
    methods: {},
};
</script>
<style lang="scss">
.right {
    .el-scrollbar {
        width: 100% !important;
    }

    .el-scrollbar__wrap {
        width: 114%;
        height: 100%;
        overflow-x: hidden !important;
    }

    .el-scrollbar__view {
        padding-right: 12% !important;
    }
}

</style>
<style lang='scss' scoped>
.right {
    position: absolute;
    top: vh(50);
    right: 0;
    box-sizing: border-box;
    width: vw(300);
    height: vh(1030);
    padding: vw(10) vw(18);
    border-radius: vw(3);
    background: rgba(0, 0, 0, 0.6);
    font-size: vw(14);

    .right-title {
        width: 100%;
        height: vh(50);
        line-height: vh(50);

        div {
            float: left;
        }

        .title-search {
            margin-right: vw(5);
        }

        .title-input {
            width: vw(140);
        }
    }

    .right-content {
        // box-sizing: border-box;
        width: 105%;
        height: vh(800);
        // padding-right: 12px;
        margin-top: vh(15);

        ul {
            list-style: none;
            height: 100%;
            padding: 0;
            margin: 0;

            li {
                width: 100%;
                height: vh(40);
                padding: vw(2) 0;
                border-bottom: vw(1) solid rgba(255, 255, 255, 0.6);
                background: linear-gradient(to left, #62a8d1, #62a8d1) right bottom no-repeat,;
                background-size: vw(5) vw(1);
                line-height: vh(40);

                &:nth-child(1) {
                    border-top: vw(1) solid rgba(255, 255, 255, 0.6);
                }

                .content-wrap {
                    width: 100%;
                    height: 100%;
                    color: rgba(255, 255, 255, 0.8);
                    cursor: pointer;

                    &:hover {
                        color: rgba(255, 255, 255, 1);
                        background: rgba(0, 0, 0, 0.25);
                    }

                    span {
                        display: inline-block;
                    }

                    .wrap-icon-pre {
                        width: 13%;
                        font-size: vw(16);
                        text-align: center;
                    }

                    .wrap-name {
                        width: 79%;
                    }

                    .wrap-icon-aft {
                        width: 8%;
                        color: #62a8d1;
                        font-size: vw(16);
                    }
                }
            }
        }
    }
}
</style>
